<script setup>
  import { RouterLink, RouterView, useRouter } from 'vue-router';
  import { ref } from 'vue';
  import HTTPserver from '@/js/HTTPserver';
  const props = defineProps({
    sort: {
      type: Number,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    description: {
      type: String,
      required: true,
    },
    url: {
      type: String,
      required: true,
    },
    img: {
      type: String,
      required: true,
    },
  });
  const router = useRouter();
  function openWebsite() {
    router.push({ name: props.url });
  }
</script>

<template>
  <div class="card_N2 color_white" @click="openWebsite">
    <div style="width: 100%; height: 80%">
      <img style="object-fit: cover" class="img" :src="img" />
    </div>
    <div style="width: 100%; height: 20%; padding: 1rem">
      <div class="text_H4">{{ title }}</div>
    </div>
  </div>
</template>
